import type { FC } from 'react';
import { memo } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Radio, type RadioChangeEvent } from 'antd';
import { ActionEnums } from './enum';
import styles from './styles.module.less';

type ActionsProps = {
  value: number;
  onChange?: (value: number) => void;
}

export const configs = [
  {
    label: '画座位',
    value: ActionEnums.DRAW_SEAT
  },
  {
    label: '座位编号',
    value: ActionEnums.SEAT_NUM
  },
  {
    label: '拓展画布',
    value: ActionEnums.ADD_CANVAS_SIZE
  },
  {
    label: '移动座位',
    value: ActionEnums.MOVE_SEAT
  },
  {
    label: '统计座位',
    value: ActionEnums.STATISTICS_SEAT
  },
  {
    label: '删除座位',
    value: ActionEnums.DELETE_SEAT
  }
];

const Actions: FC<ActionsProps> = (props) => {
  const handleChange = useMemoizedFn(
    (e: RadioChangeEvent) => {
      props.onChange?.(e.target.value);
    }
  );

  return (
    <div className={styles.actions}>
      <Radio.Group
        value={props.value}
        onChange={handleChange}
      >
        {configs.map(config => {
          return (
            <Radio.Button
              key={config.value}
              value={config.value}
            >
              {config.label}
            </Radio.Button>
          );
        })}
      </Radio.Group>
    </div>
  );
}

export default memo(Actions);
